<template>
	<div class="ucenter-left-nav">
		<ul class="menu-group mt15">
			<router-link
				to="/ucenter/post/article"
				custom
				v-slot="{ href, navigate }">
				<li>
					<a :href="href" @click="navigate" class="post-btn">
						<UploadLogs
							theme="outline"
							size="18"
							:fill="isExactActive ? '#fff' : '#fff'"
						/>
						&nbsp; &nbsp;投稿
					</a>
				</li>
			</router-link>
		</ul>
    <!-- 自定义菜单 -->
    <Menu class="menu-group border-top mt15">
      <template #header>内容管理</template>
      <MenuItem to="/ucenter/articles">文章列表</MenuItem>
      <MenuItem to="/ucenter/columns">专栏列表</MenuItem>
      <MenuItem to="/ucenter/columns">专栏列表</MenuItem>
      <MenuItem to="/ucenter/columns">专栏列表</MenuItem>
    </Menu>

		<div class="menu-group border-top fixed-bottom">
			<div class="group-label">关于本站</div>
			<p class="about-tilte">服务条款</p>
			<p class="about-tilte">隐私政策</p>
			<img class="wechat" src="../../assets/images/wechat.jpeg" />
			<a href="https://gitee.com/itshizhan/itshizhan-cms-webfront"
				target="_blank">
				<Github theme="outline" size="12" fill="#333" />
				获取本站代码
			</a>
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import {
	// FileWord,
	// BookOne,
	// BookOpen,
	Github,
	UploadLogs,
} from "@icon-park/vue-next";
import Menu from '../base/Menu.vue'
import MenuItem from '../base/MenuItem.vue'
export default defineComponent({
	name: "PageLeftNav",
	components: {
		// FileWord,
		// BookOne,
		// BookOpen,
		Github,
		UploadLogs,
    Menu,
    MenuItem
	},
  setup() {
    // const slotProps = reactive({
    //   title:'测试'
    // })
    // return {
    //   slotProps
    // }
  }
});
</script>

<style lang="scss">
.ucenter-left-nav {
	border-right: 1px solid #f0f0f0;
	position: fixed;
	top: 60px;
	//left: 0px;
	background: #fff;
	width: 198px;
	height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;

	ul.menu-group {
		list-style: none;
		width: 198px;
		&.border-top {
			border-top: 1px solid #f0f0f0;
		}
		.group-label {
			position: relative;
			left: -5px;
			margin-bottom: 16px;
			color: #999;
			padding-left: 42px;
			font-size: 16px;
			height: 42px;
			display: flex;
			align-items: flex-end;
		}
		li {
			height: 40px;
			line-height: 40px;
			cursor: pointer;
			padding-left: 42px;
			font-size: 15px;
			a {
				color: #333;
				display: inline-block;
				width: 90%;
			}
			&.active {
				background-color: rgba(255, 20, 43, 0.04);
				a {
					color: #ff0040;
				}
			}
		}
	}
	div.fixed-bottom {
		width: 198px;
		color: #999;
		bottom: 12px;
		height: 200px;
		border-top: 1px solid #f0f0f0;
		padding-left: 42px;
		margin-top: 10px;
		p.about-tilte {
			font-size: 12px;
			height: 26px;
			line-height: 26px;
			display: inline-block;
			margin-right: 12px;
			cursor: pointer;
			text-decoration: underline;
		}
		a {
			display: block;
			font-size: 12px;
			color: #999 !important;
			margin-top: 10px;
		}
		.group-label {
			position: relative;
			left: -5px;
			margin-bottom: 12px;
			color: #999;
			font-size: 16px;
			height: 38px;
			display: flex;
			align-items: flex-end;
		}
		img.wechat {
			width: 100px;
			height: 100px;
			display: block;
			position: relative;
			left: -10px;
		}
	}
	li a.post-btn {
		display: inline-block;
		font-size: 16px;
		text-align: center;
		line-height: 40px;
		border-radius: 4px;
		background: #00a1d6;
		cursor: pointer;
		color: #ffffff !important;
	}
}
</style>
